<!-- TOP NAVBAR -->
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top" role="navigation">
    <!-- Sidebar toggle button-->
    <a href="#" class="hidden-xs navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </a>
    <div class="hidden-xs logo">BONANZOOKA</div>

    <!-- search form -->
    <div class="hidden-xs search">
        <form action="#" method="get" class="sidebar-form">
            <div class="input-group">
                <input type="text" name="q" style="border-color: transparent !important;" class="text-green form-control" placeholder="Search..." />
                <span class="input-group-btn">
                    <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i>
                    </button>
                </span>
            </div>
        </form>
    </div>


    <!-- /.search form -->
    <div class="navbar-right">
        <ul class="nav navbar-nav">
            <!-- Messages: style can be found in dropdown.less-->
            <li class="dropdown messages-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <i class="fa   fontello-mail"></i>
                    <span class="label label-success">4</span>
                </a>
                <ul class="dropdown-menu bg-green">
                    <li class="header bg-green">
                        <span class="text-green fa fa-sort-desc"></span>You have 4 messages</li>
                    <li class="divider bg-opacity-white"></li>
                    <li>
                        <!-- inner menu: contains the actual data -->
                        <ul class="menu">
                            <li>
                                <!-- start message -->
                                <a href="#">
                                    <div class="pull-left">
                                        <img src="http://api.randomuser.me/portraits/thumb/men/30.jpg" class="img-circle" alt="User Image" />
                                    </div>
                                    <h4>
                                        Developer
                                        <!-- <small><i class="fa fa-clock-o"></i> 5 mins</small> -->
                                    </h4>
                                    <p>Bug fixed level 90%</p>
                                </a>
                            </li>
                            <!-- end message -->
                            <li>
                                <a href="#">
                                    <div class="pull-left">
                                        <img src="http://api.randomuser.me/portraits/thumb/women/30.jpg" class="img-circle" alt="user image" />
                                    </div>
                                    <h4>
                                        Aplication Support
                                        <!-- <small><i class="fa fa-clock-o"></i> 2 hours</small> -->
                                    </h4>
                                    <p>There is some bug in your last submit</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="pull-left">
                                        <img src="http://api.randomuser.me/portraits/thumb/men/31.jpg" class="img-circle" alt="user image" />
                                    </div>
                                    <h4>
                                        Lead Developers

                                    </h4>
                                    <p>Please check again your submit</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="pull-left">
                                        <img src="http://api.randomuser.me/portraits/thumb/women/31.jpg" class="img-circle" alt="user image" />
                                    </div>
                                    <h4>
                                        Web Designer

                                    </h4>
                                    <p>Art has done</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="pull-left">
                                        <img src="http://api.randomuser.me/portraits/thumb/men/32.jpg" class="img-circle" alt="user image" />
                                    </div>
                                    <h4>
                                        General Manager

                                    </h4>
                                    <p>Employed newslatter</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="divider bg-opacity-white"></li>
                    <li class="footer">
                        <btn class="btn btn-xs bg-opacity-white-btn  fontello-arrows-cw"></btn>
                        <btn class="btn btn-xs bg-opacity-white-btn fontello-trash"></btn>
                        <btn class="btn btn-xs bg-opacity-white-btn fontello-eye-outline"></btn>
                    </li>
                </ul>
            </li>
            <!-- Notifications: style can be found in dropdown.less -->
            <li class="dropdown notifications-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fontello-bell"></i>
                    <span class="label bg-aqua">10</span>
                </a>
                <ul class="dropdown-menu bg-aqua">

                    <li class="header bg-aqua">
                        <span class="text-aqua fa fa-sort-desc"></span>You have 10 notifications</li>
                    <li class="divider bg-opacity-white"></li>
                    <li>
                        <!-- inner menu: contains the actual data -->
                        <ul class="menu">
                            <li>
                                <a href="#">
                                    <i class="fa fontello-user-add-outline"></i> New developer registered
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="fa fontello-upload-outline"></i> 2 item commit
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="fa fontello-users-outline"></i> 3 members joined
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <i class="fa fontello-basket"></i> 22 sales made
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="fa fontello-contacts"></i> New task from manager
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="divider bg-opacity-white"></li>
                    <li class="footer">
                        <btn class="btn btn-xs bg-opacity-white-btn  fontello-arrows-cw"></btn>
                        <btn class="btn btn-xs bg-opacity-white-btn fontello-trash"></btn>
                        <btn class="btn btn-xs bg-opacity-white-btn fontello-eye-outline"></btn>
                    </li>
                </ul>
            </li>
            <!-- Tasks: style can be found in dropdown.less -->
            <li class="dropdown tasks-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <i class="fa  fontello-contacts"></i>
                    <span class="label label-danger">9</span>
                </a>
                <ul class="dropdown-menu bg-red">

                    <li class="header bg-red">
                        <span class="text-red fa fa-sort-desc"></span>You have 9 tasks</li>
                    <li class="divider bg-opacity-white"></li>
                    <li>
                        <!-- inner menu: contains the actual data -->
                        <ul class="menu text-white">
                            <li>

                                <!-- Task item -->
                                <a href="#">
                                    <h3 class="fontello-leaf">
                                        Tidy up your files
                                        <small class="pull-right">35%</small>
                                    </h3>
                                    <div class="progress xs bg-white">
                                        <div class="progress-bar bg-red-orange " style="width: 35%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                                            <span class="sr-only">35% Complete</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <!-- end task item -->
                            <li>
                                <!-- Task item -->
                                <a href="#">
                                    <h3 class="fontello-box">
                                        Check server status
                                        <small class="pull-right">40%</small>
                                    </h3>
                                    <div class="progress xs bg-white">
                                        <div class="progress-bar bg-red-orange" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                                            <span class="sr-only">40% Complete</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <!-- end task item -->
                            <li>
                                <!-- Task item -->
                                <a href="#">
                                    <h3 class="fontello-headphones">
                                        Support costumer
                                        <small class="pull-right">60%</small>
                                    </h3>
                                    <div class="progress xs bg-white">
                                        <div class="progress-bar bg-red-orange" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                                            <span class="sr-only">60% Complete</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <!-- end task item -->
                            <li>
                                <!-- Task item -->
                                <a href="#">
                                    <h3 class="fontello-fire-station">
                                        Fix bug
                                        <small class="pull-right">80%</small>
                                    </h3>
                                    <div class="progress xs bg-white">
                                        <div class="progress-bar bg-red-orange" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                                            <span class="sr-only">80% Complete</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <!-- end task item -->
                        </ul>
                    </li>
                    <li class="divider bg-opacity-white"></li>
                    <li class="footer">
                        <btn class="btn btn-xs bg-opacity-white-btn  fontello-arrows-cw"></btn>
                        <btn class="btn btn-xs bg-opacity-white-btn fontello-trash"></btn>
                        <btn class="btn btn-xs bg-opacity-white-btn fontello-eye-outline"></btn>
                    </li>
                </ul>
            </li>

            <li class="dropdown style-menu">
                <a class="dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fontello-pipette"></i>

                </a>
                <ul class="dropdown-menu bg-white">

                    <li style="margin:10px 0 0 10px">
                        <span class="label text-right bg-blue">STYLE</span>
                    </li>

                    <li class="header-changer">
                        <a data-toggle="tooltip" data-placement="top" title="Light" class="paint bg-gray" href="javascript: void(0)" title="switch styling" id="theme1"></a>
                    </li>
                    <li class="header-changer">
                        <a data-toggle="tooltip" data-placement="top" title="Default" class="paint bg-black" href="javascript: void(0)" title="switch styling" id="theme2"></a>
                    </li>
                    <li class="header-changer">
                        <a data-toggle="tooltip" data-placement="top" title="Blue" class="paint bg-aqua" href="javascript: void(0)" title="switch styling" id="theme3"></a>
                    </li>
                    <li class="header-changer">
                        <a data-toggle="tooltip" data-placement="top" title="Green" class="paint bg-green" href="javascript: void(0)" title="switch styling" id="theme4"></a>
                    </li>
                    <li class="header-changer">
                        <a data-toggle="tooltip" data-placement="top" title="Red" class="paint bg-red" href="javascript: void(0)" title="switch styling" id="theme5"></a>
                    </li>
                    <li class="divider bg-opacity-white"></li>
                </ul>
            </li>

            <li class="">
                <span class="chat-toggle dropdown-toggle" data-toggle="dropdown">
                    <i class="text-gray fa fontello-th"></i>
                </span>

                <ul class="dropdown-menu pull-right chat-list nano" id="dropdown-right" role="menu">
                    <div class="nano-content">
                        <li class="list-title"><i class="fontello-chat-alt"></i>&nbsp;&nbsp;
                            <strong>Announcement</strong>
                        </li>

                        <li class="list-group-item no-border flat bg-transparent">
                            <span class="fa-stack pull-left list-left fa-lg text-green">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fontello-graduation-cap fa-stack-1x fa-inverse"></i>
                            </span>
                            <span class="clear"> <a class="text-green" href="#">Fill out profile</a> Provide more information for your profile
                                <p>
                                    <small class=" fontello-clock">13 minutes ago</small>
                                </p>
                            </span>
                        </li>
                        <li class="list-group-item no-border flat bg-transparent">
                            <span class="fa-stack pull-left list-left fa-lg text-red">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-share-square-o fa-stack-1x fa-inverse"></i>
                            </span>
                            <span class="clear"> <a class="text-red" href="#">Complete Your Commit</a> please check your lastest job commit
                                <p>
                                    <small class=" fontello-clock">20 minutes ago</small>
                                </p>
                            </span>
                        </li>
                        <li class="list-group-item no-border flat bg-transparent">
                            <span class="fa-stack pull-left list-left fa-lg text-blue">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fontello-ticket fa-stack-1x fa-inverse"></i>
                            </span>
                            <span class="clear">
                                <a class="text-blue" href="#">
                                    <strong>Meeting Invitation</strong>
                                </a>Let's join general meeting on Monday
                                <p>
                                    <small class=" fontello-clock">1 day ago</small>
                                </p>
                            </span>
                        </li>
                        <li class="list-title margin-center"><i class="fontello-chat-alt"></i>&nbsp;&nbsp;
                            <strong>Chat</strong>
                        </li>
                        <li>
                            <span class="bg-yellow flat-radius">Online</span>
                        </li>

                        <li class="list-group-item flat no-border">
                            <span class="pull-left list-left">
                                <img alt="" class="img-chat img-circle" src="http://api.randomuser.me/portraits/thumb/men/30.jpg">
                            </span>
                            <span class="clear"> <a class="text-green" href="#">Lester Palmer</a>
                                <p>
                                    <small class=" fontello-clock">45 minutes ago</small>
                                </p>
                            </span>
                        </li>
                        <li class="list-group-item flat no-border">
                            <span class="pull-left list-left">
                                <img alt="" class="img-chat img-circle" src="http://api.randomuser.me/portraits/thumb/men/31.jpg">
                            </span>
                            <span class="clear"> <a class="text-green" href="#">Harold Flores</a>
                                <p>
                                    <small class=" fontello-clock">33 minutes ago</small>
                                </p>
                            </span>
                        </li>
                        <li class="list-group-item flat no-border">
                            <span class="pull-left list-left">
                                <img alt="" class="img-chat img-circle" src="http://api.randomuser.me/portraits/thumb/men/32.jpg">
                            </span>
                            <span class="clear"> <a class="text-green" href="#">Jacqueline Williamson</a>
                                <p>
                                    <small class=" fontello-clock">31 minutes ago</small>
                                </p>
                            </span>
                        </li>
                        <li>
                            <span class="bg-gray flat-radius text-white">Offline</span>
                        </li>
                        <li class="list-group-item flat no-border">
                            <span class="pull-left list-left">
                                <img alt="" class="img-chat img-offline  img-circle" src="http://api.randomuser.me/portraits/thumb/women/33.jpg">
                            </span>
                            <span class="clear"> <a class="text-green" href="#">Logan Knight</a>
                                <p>
                                    <small class=" fontello-clock">28 minutes ago</small>
                                </p>
                            </span>
                        </li>
                        <li class="list-group-item flat no-border">
                            <span class="pull-left list-left">
                                <img alt="" class="img-chat img-offline  img-circle" src="http://api.randomuser.me/portraits/thumb/men/34.jpg">
                            </span>
                            <span class="clear"> <a class="text-green" href="#">Virgil Jennings</a>
                                <p>
                                    <small class=" fontello-clock">26 minutes ago</small>
                                </p>
                            </span>
                        </li>
                        <li class="list-group-item flat no-border">
                            <span class="pull-left list-left">
                                <img alt="" class="img-chat img-offline  img-circle" src="http://api.randomuser.me/portraits/thumb/women/35.jpg">
                            </span>
                            <span class="clear"> <a class="text-green" href="#">Raisa Ilove You</a>
                                <p>
                                    <small class=" fontello-clock">13 minutes ago</small>
                                </p>
                            </span>
                        </li>
                        <li class="list-group-item flat no-border">
                            <span class="pull-left list-left">
                                <img alt="" class="img-chat img-offline  img-circle" src="http://api.randomuser.me/portraits/thumb/women/36.jpg">
                            </span>
                            <span class="clear"> <a class="text-green" href="#">Jeniffer Anintoon</a>
                                <p>
                                    <small class=" fontello-clock">13 minutes ago</small>
                                </p>
                            </span>
                        </li>
                        <li style="margin-bottom:100px" class="list-group-item flat no-border">
                            <span class="pull-left list-left">
                                <img alt="" class="img-chat img-offline  img-circle" src="http://api.randomuser.me/portraits/thumb/men/37.jpg">
                            </span>
                            <span class="clear"> <a class="text-green" href="#">Ryan Wilson</a>
                                <p>
                                    <small class=" fontello-clock">13 minutes ago</small>
                                </p>
                            </span>
                        </li>
                    </div>
                </ul>
            </li>
        </ul>
    </div>
</nav>






<!-- /END OF TOP NAVBAR -->
<script src="js/plugins/nicescroll/jquery.nanoscroller.js"></script>

<script>
//Enable sidebar toggle
$("[data-toggle='offcanvas']").click(function() {

    if ($(this).hasClass('active')) {
        $(this).removeClass('active')

        $('.leftmenu').animate({
            left: 0
        }, 500);
        $(".navbar").animate({
            left: 0
        }, 500);

        $(".right-side").animate({
            "margin-left": "220px"
        }, 500);
    } else {
        $(this).addClass('active')
        //Else, enable content streching
        $('.leftmenu').animate({
            left: -220
        }, 500);

        $(".navbar").animate({
            left: -220
        }, 500);
        $(".right-side").animate({
            "margin-left": "0px"
        }, 500);
    }
    return false;
});


// show skin select for a second
setTimeout(function() {
    $("[data-toggle='offcanvas']").addClass('active').trigger('click');
}, 10)

$("[data-toggle='tooltip']").tooltip();

/*
 * ADD SLIMSCROLL TO THE TOP NAV DROPDOWNS
 * ---------------------------------------
 */
$(".navbar .menu").slimscroll({
    height: "200px",
    alwaysVisible: false,
    size: "3px"
}).css("width", "100%");

(function($) {
    $(".nano").nanoScroller();
})(jQuery);

$('.header-changer').styleSwitcher({
             manageCookieLoad: false
        });
</script>
